.soginIn_wrap {
  box-sizing: border-box;
  color: #fff;
  background: var(--sigin-wrap-bg_img) no-repeat;
  background-size: contain;
  height: 100vh;
  overflow: hidden;
  position: relative;
  // background-size: 316px;
  padding: 0.1px;

  .yun {
    width: 182px;
    height: 155px;
    background: url('../../images/sigin_yun.png') no-repeat;
    background-size: contain;
    position: absolute;
    top: 88px;
    right: 25px;
    z-index: 10;
  }

  .sigin_info {
    box-sizing: border-box;
    margin-top: 137px;
    border-radius: 24px 24px 0 0;
    height: 100vh;
    background-color: var(--sigin-page-bg);
    padding-top: 23px;

    .my_info {
      font-size: 16px;
      display: flex;

      .btn {
        width: 48px;
        height: 20px;
        background: rgba(#affba1, 0.2);
        border-radius: 16px;
        font-size: 12px;
        text-align: center;
        line-height: 19px;
        margin-left: 4px;
      }
    }

    .sigin_list {
      border-radius: 20px;
      margin: 0 auto 0;
      position: relative;
      padding: 4px 12px;
      width: 343px;
      height: 210px;
      background: var(--sigin-card-bg) var(--sigin-card-bg_img) no-repeat;
      background-size: contain;
      box-sizing: border-box;

      .sigin_day_txt {
        color: var(--sigin-tips-text);
        // font-family: Alibaba PuHuiTi;
        font-size: 14px;
        line-height: 24px;
        font-weight: 600;
      }

      .vip_tips {
        margin-top: 12px;
        width: 92px;
        height: 16px;
        background: url('../../images/sigin_txt.png') no-repeat;
        background-size: 100%;
      }

      .sigin_in_days {
        text-align: center;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;

        .sigin_item {
          width: 40px;
          position: relative;

          // .icon {
          //     position: absolute;
          //     top: -4px;
          //     left: 9px;
          //     width: 20px;
          //     height: 20px;
          //     background: url('../../images/unit_icon.png') no-repeat;
          //     background-size: 100%;
          //     z-index: 2;
          // }

          // .info {
          //     width: 37px;
          //     height: 46px;
          //     position: relative;
          //     background-color: rgba(#FFAC30, .2);
          //     border-radius: 8px;
          //     margin-bottom: 3px;
          //     display: flex;
          //     justify-content: center;
          //     align-items: center;

          //     .point {
          //         width: 24px;
          //         height: 24px;
          //         // background-color: #FF8744;
          //         font-size: 18px;
          //         text-align: center;
          //         line-height: 24px;
          //         color: rgba(#FFAC30, .4);
          //         font-family: DINPro;
          //         font-weight: 600;
          //         padding-top: 2px;
          //         span {
          //             // transform: scale(.85);
          //             display: inline-block;
          //         }
          //     }

          //     &.down {
          //         background-color: rgba(#FFAC30, .2);

          //         .point {
          //             height: 18px;
          //             width: 18px;
          //             font-size: 0;
          //             background: url('../../images/sigin_down.png') no-repeat;
          //             background-size: contain;
          //             margin-top: 5px;
          //         }
          //     }
          //     &.ready {
          //         .point {
          //             color: #000;
          //         }
          //         background: linear-gradient(180deg, #FFAC30 0%, #FFD130 100%);
          //     }
          // }
          .tips {
            position: absolute;
            top: -20px;
            left: -3px;
            background: url('../../images/gift_tips.png') no-repeat;
            background-size: contain;
            width: 46px;
            height: 21px;

            span {
              color: #fff;
              font-family: PingFang SC;
              font-size: 12px;
              font-style: normal;
              font-weight: 500;
              zoom: calc(8 / 12);
            }
          }

          .info {
            margin: 0 auto;
            width: 32px;
            height: 32px;
            background: url('../../images/sigin_un.png') no-repeat;
            background-size: contain;

            &.down {
              background: url('../../images/sigin_down2.png') no-repeat;
              background-size: contain;
            }

            &.ready {
              background: url('../../images/sigin_ready2.png') no-repeat;
              background-size: contain;
            }

            &.gift {
              background: url('../../images/sigin_gift.png') no-repeat;
              background-size: contain;
            }
          }

          .day_txt {
            color: var(--main-text-color);
            text-align: center;
            padding-top: 6px;
            font-size: 12px;
            opacity: 0.6;

            &.down {
              opacity: 1;
            }
          }
        }
      }
    }

    .sigin_btn {
      margin: 40px auto 0;
      width: 243px;
      height: 48px;
      // background: rgba(#fff, .2);
      color: rgba(#fff);
      line-height: 48px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      // position: absolute;
      // right: 12px;
      // top: 12px;
      background: var(--button-main-disabled-bg);
      border-radius: 8px;
      opacity: 0.4;

      &.active {
        background: var(--button-main-bg);
        color: #fff;
        opacity: 1;
      }
    }
  }

  .my_data {
    color: #fff;
    position: absolute;
    top: 98px;
    left: 40px;

    .i {
      display: flex;
      // align-items: center;
      font-size: 12px;
      line-height: 1;

      .icon {
        width: 12px;
        height: 12px;
        background: url('../../images/sigin_ready2.png') no-repeat;
        background-size: contain;
        margin-right: 2px;
      }
    }

    .num {
      font-size: 28px;
      font-style: normal;
      font-weight: 700;
      padding-left: 22px;
      padding-top: 8px;

      span {
        font-size: 12px;
      }
    }
  }

  .gift_modal {
    background:
      url('../../images/sigin_gift_bg.png') no-repeat,
      url('../../images/sigin_spc.png') no-repeat;
    background-size:
      280px 333px,
      contain;
    background-position:
      28px center,
      10px -20px;
    width: 330px;
    height: 333px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    .content {
      width: 256px;
      box-sizing: border-box;
      position: relative;
      box-sizing: border-box;
      margin: 160px auto 0;

      display: flex;
      justify-content: space-between;

      .item {
        position: relative;
        overflow: hidden;
        width: 73px;
        height: 95px;
        border-radius: 14.737px;
        background: rgba(255, 136, 30, 0.1);
        border: 2px solid transparent;

        img {
          width: 100%;
          // height: 100%;
        }

        .icon {
          width: 24px;
          height: 12px;
          border-radius: 6px;
          background: linear-gradient(180deg, #ff7193 0%, #ffa463 100%);
          // background: url('../../images/gift_exprie.png') no-repeat;
          // background-size: contain;
          position: absolute;
          right: 6px;
          top: 6px;
          text-align: center;
          line-height: 9px;

          span {
            color: #fff;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            zoom: calc(8 / 12);
          }
        }

        .desc {
          width: 73px;
          height: 22px;
          text-align: center;
          line-height: 22px;
          position: absolute;
          bottom: 0;
          left: 0;
          background-color: rgba(#ff881e, 0.2);

          span {
            color: #ff8920;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            zoom: calc(10 / 12);
          }
        }

        &.active {
          border: 2px solid #ffad30;
        }
      }
    }

    .btn {
      margin: 24px auto;
      width: 244px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border-radius: 17.684px;
      background: linear-gradient(180deg, #ffac30 0%, #ffd130 100%);

      // opacity: .2;
      &.un {
        background: url('../../images/gift_un_bg.png') no-repeat;
        background-size: contain;
        color: #ffac30;
      }
    }

    .close {
      width: 44px;
      height: 44px;
      margin: 34px auto 0;
      background: url('../../images/gift_close.png') no-repeat;
      background-size: contain;
    }
  }
  // .gift_bg2 {
  //     width: 330px;
  //     height: 138px;
  //     background: url('../../images/sigin_spc.png');
  //     background-size: cover;
  //     position: absolute;
  //     left: 50%;
  //     transform: translateX(-49%);
  //     top: -160px;
  //     z-index: 0;
  // }
}
